import {View, Text, StyleSheet, Image} from 'react-native';
import React from 'react';
// 导入服务器端的图片,该图片就会随着APP一起打包安装入手机中
// 使用commonJS语法导入
let logo1 = require('../img/logo.png');
// 使用ES6语法导入
import logo2 from '../img/logo.png';

export default function AdminLogin() {
  return (
    <View style={ss.screen}>
      {/* F1: */}
      {/* F2: */}
      {/* F3:登录按钮 */}
      {/* F4:Logo和标题 */}
      <View style={ss.f4}>
        {/* 演示1:加载手机本地图片 */}
        {/* <Image source="../img/logo.png" /> 这是错误写法:手机中没有图片资源 */}
        {/* <Image source={logo1} />
        <Image source={logo2} /> */}
        {/* <Image source={require('../img/logo.png')} /> */}

        {/* 演示2:加载远程服务器上的图片 */}
        <Image
          style={{width: 100, height: 50}}
          resizeMode="repeat"
          source={{
            uri: 'https://cdn.tmooc.cn/tmooc-web/css/img/img_index_lty02.png',
          }}
        />
        <Text style={ss.title}>后台管理系统</Text>
      </View>
      {/* F5:版权声明 */}
      <Text style={ss.copyright}>版权所有 &copy; IKUN科技</Text>
    </View>
  );
}

// 在模块内部声明 内部样式
let ss = StyleSheet.create({
  screen: {
    // padding:30 50,  此写法错误
    paddingHorizontal: 50, // 水平内边距 :  left+right
    paddingVertical: 80, //  竖直内边距: top + bottom
  },
  copyright: {
    textAlign: 'center',
    marginVertical: 64,
    color: '#acabba',
  },
  f4: {
    // 把弹性容器主轴方向有默认的纵向改为横向
    flexDirection: 'row',
    // 弹性容器的子元素在主轴方向上对齐方式:空白方式
    justifyContent: 'space-between',
    marginTop: 42,
    // 弹性容器中的子元素在交叉轴上(纵轴)对齐方式:居中对齐
    alignItems: 'center',
  },
  title: {
    fontSize: 28,
  },
});
